<template>
	<view class="container">
		<view class="custom-back-icon" style="display: flex;height: 88upx;line-height: 88upx;"
			:style="{'margin-top': (systemInfo.backPosition-7)+'px'}">
			<uni-icons type="left" size="30" @click="goBack"></uni-icons>
		</view>
		<view class="carousel">
			<swiper indicator-dots circular=true duration="400">
				<swiper-item class="swiper-item" v-for="(item,index) in imgList" :key="index">
					<view class="image-wrapper">
						<image 
							:src="item" 
						></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="info-box">
			<view class="introduce-section">
				<view class="price-box">
					<text class="price-tip">¥</text>
					<text class="price">{{goodsResponse.unitPrice}}</text>
					<!-- <text class="m-price">¥488</text>
					<text class="coupon-tip">7折</text> -->
				</view>
				<text class="title">{{goodsResponse.name}}</text>
				<text class="remark" v-if="goodsResponse.remark">{{goodsResponse.remark}}</text>
			</view>
			
			<view class="size-list-box">
				<view class="size-item-box">
					<view class="size-item" v-for="size in goodsResponse.sizeResponseList">
						<view class="size-info">
							<view class="img-box">
								<image :src="size.icon?size.icon:goodsResponse.icon"></image>
							</view>
							<view class="size-name">{{size.unit}}</view>
							<text class="price">￥{{size.unitPrice}}</text>
						</view>
						<uni-number-box class="uni-number-box" v-model="size.buyNumber" :min="0"></uni-number-box>
					</view>
				</view>
			</view>
		</view>
		
		
		
		<view class="detail-desc">
			<view class="d-header">
				<text>商品介绍</text>
			</view>
			<view>
				<view v-if="goodsResponse.goodsHtmlContent">
					<image
					:src="contentIcon" 
					v-for="contentIcon in goodsResponse.goodsHtmlContent.split(',')" alt=""
					mode="aspectFit"
					 style="width: 750upx;">
				</view>
			</view>
		</view>
		<view class="h210" style="height: 210upx;"></view>
		
		<!-- 底部操作菜单 -->
		<view class="page-bottom">
			<view class="navi-box">
				<navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
					<image style="width: 38upx;height: 38upx;" src="https://qiniu.dadaozhixing.top/dxx/pages/product/kefu.png"></image>
					<text>客服</text>
				</navigator>
				<navigator url="/pages/cart/cart" open-type="switchTab" class="p-b-btn">
					<image style="width: 38upx;height: 38upx;" src="/static/tab-cart.png"></image>
					<text>购物车</text>
				</navigator>
			</view>
			
			<view class="action-btn-group">
				<button type="primary" class=" action-btn no-border add-cart-btn" @click="add2Cart">加入购物车</button>
				<button type="primary" class=" action-btn no-border buy-now-btn" @click="buy">立即购买</button>
			</view>
		</view>
		
		
		<!-- 分享 -->
		<share 
			ref="share" 
			:contentHeight="580"
			:shareList="shareList"
		></share>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	import share from '@/components/share';
	import { goodsDetailByIdApi, add2CartApi } from '@/api/goods'
	import uniNumberBox from '@/components/uni-number-box.vue'
	export default{
		components: {
			share
		},
		computed: {
			...mapState(['systemInfo'])
		},
		data() {
			return {
				specClass: 'none',
				specSelected:[],
				
				favorite: true,
				shareList: [],
				goodsResponse: '',
				imgList: []
			};
		},
		async onLoad(options){
			//接收传值,id里面放的是标题，因为测试数据并没写id 
			let id = options.id;
			if(id){
				this.$api.msg(`点击了${id}`);
			}
			
			let ret = await goodsDetailByIdApi({id})
			// console.log(ret);
			if(ret && ret.code == 200) {
				this.goodsResponse = ret.data
				ret.data.sizeResponseList.forEach(size=>{
					size.buyNumber = 0
					let curIcon = size.icon ? size.icon : ret.data.icon
					if (curIcon && !this.imgList.includes(curIcon) ) {
						this.imgList.push(curIcon)
					}
				})
			}
			// console.log(this.imgList)
		},
		methods:{
			...mapActions([
				"goBack"
			]),
			//规格弹窗开关
			toggleSpec() {
				if(this.specClass === 'show'){
					this.specClass = 'hide';
					setTimeout(() => {
						this.specClass = 'none';
					}, 250);
				}else if(this.specClass === 'none'){
					this.specClass = 'show';
				}
			},
			//选择规格
			selectSpec(index, pid){
				let list = this.specChildList;
				list.forEach(item=>{
					if(item.pid === pid){
						this.$set(item, 'selected', false);
					}
				})

				this.$set(list[index], 'selected', true);
				//存储已选择
				/**
				 * 修复选择规格存储错误
				 * 将这几行代码替换即可
				 * 选择的规格存放在specSelected中
				 */
				this.specSelected = []; 
				list.forEach(item=>{ 
					if(item.selected === true){ 
						this.specSelected.push(item); 
					} 
				})
				
			},
			//分享
			share(){
				this.$refs.share.toggleMask();	
			},
			//收藏
			toFavorite(){
				this.favorite = !this.favorite;
			},
			validBuySize () {
				let buySizeList = []
				if (this.goodsResponse.sizeResponseList) {
					let goodsId = this.goodsResponse.goodsId
					this.goodsResponse.sizeResponseList.forEach(item=>{
						if(item.buyNumber) {
							buySizeList.push({id: item.id,goodsId: goodsId,buyNumber:item.buyNumber,icon:item.icon,unitPrice:item.unitPrice,remark: item.remark})
						}
					})
				}
				if(buySizeList.length==0) {
					this.$api.msg("请选择要购买的商品")
				}else {
					return buySizeList
				}
			},
			buy(){
				let buySizeList = this.validBuySize()
				if(buySizeList && buySizeList.length>0) {
					uni.navigateTo({
						url: `/pages/order/createOrder?data=`+JSON.stringify(buySizeList)
					})
				}
			},
			add2Cart(){
				let buySizeList = this.validBuySize()
				if(buySizeList && buySizeList.length>0) {
					buySizeList.forEach(goodsSizeBuy=>{
						this.addGoodsSize2Cart(goodsSizeBuy)
					})
					this.$api.msg("加入购物车成功")
				}
			},
			async addGoodsSize2Cart(goodsSizeBuy){
				let ret = await add2CartApi({
					// customerId: this.userInfo.id,
					goodsId: goodsSizeBuy.goodsId,
					goodsSizeId: goodsSizeBuy.id,
					buyNumber: goodsSizeBuy.buyNumber
				})
				if (ret && ret.code == 200) {
					goodsSizeBuy.buyNumber = 0
				}
			},
			
			stopPrevent(){}
		},

	}
</script>

<style lang='scss' scoped>
	page{
		background: #F5F5F9;
		padding-bottom: 160upx;
	}
	.container{
		background: #F5F5F9;
	}
	
	
	
	.carousel {
		  height: 722upx;
		  position:relative;
		  swiper{
				  height: 100%;
		  }
		  .image-wrapper{
				  width: 100%;
				  height: 100%;
		  }
		  .swiper-item {
				  display: flex;
				  justify-content: center;
				  align-content: center;
				  height: 750upx;
				  overflow: hidden;
				  image {
						  width: 100%;
						  height: 100%;
						  opacity: 1;
				  }
		  }
	}
	
	.info-box {
		margin: 24upx;
		background: #F5F5F9;
		
		.introduce-section{
			background-color: white;
			border-radius: 16upx;
			padding: 24upx;
			display: flex;
			flex-direction: column;
			
			.price-box{
				color: #FF5C5C;
				font-size: 36upx;
				line-height: 54upx;
				
			}
			.title {
				font-weight: 600;
				font-size: 32rpx;
				color: #23242E;
				height: 48rpx;
				line-height: 48rpx;
			}
			.remark {
				font-size: 28rpx;
				color: #7F808A;
				line-height: 42rpx;
				height: 42rpx;
			}
		}
		
		.size-list-box{
			
			.size-item{
				margin-top: 24upx;
				margin-bottom: 24upx;
				display: flex;
				align-items: center;
				background: white;
				.size-info{
					display: flex;
					align-items: center;
					.img-box{
						width: 102upx;
						padding: 5upx;
						image {
							width: 92upx;
							height: 92upx;
						}
					}
					.size-name {
						width: 150upx;
						margin: 0 24upx;
						font-weight: 600;
						font-size: 28rpx;
						color: #23242E;
					}
					.price {
						font-size: 28rpx;
						color: #FF5C5C;
						line-height: 42rpx;
					}
				}
				.uni-number-box{
					position: relative;
					margin-top: 48upx;
				}
			}
		}
	}
	.detail-desc{
		margin-top: 24upx;
	}
	
	/* 底部操作菜单 */
	.page-bottom{
		position:fixed;
		bottom:0upx;
		z-index: 1000;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 750upx;
		height: 180upx;
		background: rgba(255,255,255,.9);
		box-shadow: 0 0 20upx 0 rgba(0,0,0,.5);
		
		.navi-box{
			display: flex;
			font-size: 24rpx;
			color: #23242E;
			line-height: 36rpx;
		}
		
		.p-b-btn{
			display:flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-sm;
			color: $font-color-base;
			width: 96upx;
			height: 80upx;
			.yticon{
				font-size: 40upx;
				line-height: 48upx;
				color: $font-color-light;
			}
			&.active, &.active .yticon{
				color: $uni-color-primary;
			}
			.icon-fenxiang2{
				font-size: 42upx;
				transform: translateY(-2upx);
			}
			.icon-shoucang{
				font-size: 46upx;
			}
		}
		.action-btn-group{
			display: flex;
			height: 76upx;
			margin-right: 24upx;
			border-radius: 100px;
			overflow: hidden;
			box-shadow: 0 20upx 40upx -16upx #fa436a;
			box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
			margin-left: 20upx;
			position:relative;
			&:after{
				content: '';
				position:absolute;
				top: 50%;
				right: 50%;
				transform: translateY(-50%);
				height: 28upx;
				width: 0;
			}
			.action-btn{
				display:flex;
				align-items: center;
				justify-content: center;
				width: 180upx;
				height: 100%;
				font-size: $font-base ;
				padding: 0;
				border-radius: 0;
			}
			.add-cart-btn{
				background-color: #FFBC4B;
				width: 194upx;
			}
			.buy-now-btn {
				background-color: #3EB3F3;
			}
		}
	}
	
</style>
